<!-- 
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2021/07/14 00:27:45
  @file: NotFound.vue
  @description:
  ```
  NotFound
  [border-radius](https://juejin.cn/post/6844903687324712974)
  ```
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="NotFound">
    404, not found page
    <router-link to="/" class="link blue">返回首页</router-link>
    <router-link to="/" class="link leaf">返回首页</router-link>
    <router-link to="/" class="link ellipse">返回首页</router-link>
    <router-link to="/" class="link twisted-picture-frame">
      返回首页
    </router-link>
    <router-link to="/" class="link pink">返回首页</router-link>
    <router-link to="/" class="link six">返回首页</router-link>
    <router-link to="/" class="link seven">返回首页</router-link>
    <router-link to="/" class="link eight">返回首页</router-link>
    <router-link to="/" class="link border-trapezoid">返回首页</router-link>
    <router-link to="/" class="link invagination">返回首页</router-link>
    <div class="pig">
      <span class="ears"></span>
      <span class="eyes"></span>
      <span class="nose"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "NotFound",
};
</script>

<style scoped>
.link {
  display: inline-block;
  padding: 6px 18px;
  text-decoration: none;
  color: #fff;
}
.blue {
  background: #b3b3ff;
  border-radius: 100% 50%/0 100%;
}
.leaf {
  background-color: #90ef93;
  border-radius: 0 100%/0 100%;
}
.ellipse {
  background-color: #fea07b;
  border-radius: 100% 50%/100% 50%;
}
.twisted-picture-frame {
  color: #000;
  border: 4px dashed #cdcdcd;
  border-radius: 150px 400px 150px 400px/400px 150px 400px 150px;
}
.pink {
  background: linear-gradient(to bottom, #fbbcd0, #fbaac3);
  box-shadow: 0 10px 10px #b9174c;
  border-radius: 150px 14px/150px 14px;
}
.six {
  background: linear-gradient(to bottom, #e8f6d9, #bee595);
  box-shadow: 0 10px 10px #4f821d;
  border-radius: 50px/100px;
}
.seven {
  height: 60px;
  background: linear-gradient(to bottom, #d7eafd, #a3c7e8);
  box-shadow: 0 10px 10px #4179ab;
  border-radius: 50px 50px 20px 20px/200px 200px 20px 20px;
}
.eight {
  height: 60px;
  background: linear-gradient(to bottom, #fde0af, #e4b260);
  border-radius: 15px 15px 50% 50%/15px 15px 100% 100%;
  box-shadow: 0 10px 10px #986206;
}
.border-trapezoid {
  height: 0;
  width: 64px;
  border-bottom: 20px solid lightgreen;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  /*
    实现梯形实际是相当于在实现三角形的基础上(width=0)更改width。
    这里实现的是等腰梯形。若想实现非等腰梯形，可以让左右边框的宽度不相等。
*/
}
.invagination {
  width: 200px;
  height: 200px;
  margin: 100px auto 0;
  background-color: #654545;
  position: relative;
  background-image: -webkit-radial-gradient(left top, #fff 5%, transparent 0),
    -webkit-radial-gradient(right top, #fff 5%, transparent 0),
    -webkit-radial-gradient(right bottom, #fff 5%, transparent 0),
    -webkit-radial-gradient(left bottom, #fff 5%, transparent 0);
  background-size: 200px 200px;
}

.pig::before,
.pig *::before,
.pig::after,
.pig *::after {
  content: "";
  position: absolute;
}

.pig {
  width: 12em;
  height: 10em;
  font-size: 20px;
  background-color: #50a032;
  border: 0.2em solid #2b4d13;
  border-radius: 50% 50% 50% 50% / 55% 60% 40% 45%;
  position: relative;
  box-shadow: inset -1.5em 1em 1.5em -0.5em rgba(255, 255, 255, 0.3),
    inset 0.5em -0.5em 0.8em 0.2em rgba(0, 0, 0, 0.2);
  animation-name: rubberBand;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: 5s;
}

.pig::before,
.pig::after {
  width: 1.4em;
  height: 1em;
  border-top: 0.5em solid #0f2d00;
  top: 2.3em;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}

.pig::before {
  left: 1.2em;
  transform: rotate(-20deg);
}

.pig::after {
  right: 1em;
  transform: rotate(25deg);
}

.nose {
  position: absolute;
  width: 4.6em;
  height: 4em;
  background-color: #82b923;
  border: 0.1em solid #1d3c07;
  border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
  top: 3em;
  left: 4.2em;
  box-shadow: -0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6);
}

.nose::before,
.nose::after {
  width: 1.2em;
  background-color: #0f2d00;
  border-radius: 50%;
  top: 1.4em;
  box-shadow: inset -0.3em -0.2em 0.1em -0.1em #2d6b1f;
}

.nose::before {
  left: 0.8em;
  height: 1.8em;
}

.nose::after {
  right: 0.8em;
  height: 1.6em;
}

.eyes::before,
.eyes::after {
  width: 2.8em;
  height: 2.8em;
  background: radial-gradient(
      circle at var(--eyeball-left) 1.5em,
      black 0.4em,
      transparent 0.4em
    ),
    white;
  border-radius: 50%;
  border: 0.1em solid #193c09;
  top: 3.6em;
  box-shadow: inset 0.3em -0.6em 0.5em -0.2em rgba(0, 0, 0, 0.3),
    -0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6);
}

.eyes::before {
  left: 0.8em;
  --eyeball-left: 1em;
}

.eyes::after {
  right: 0.3em;
  --eyeball-left: 1.9em;
}

.ears::before,
.ears::after {
  width: 0.8em;
  height: 0.9em;
  background-color: #2f6317;
  border: 0.1em solid #1d3a0d;
  border-radius: 45% 45% 45% 45% / 55% 45% 55% 45%;
}

.ears::before {
  top: 0.3em;
  left: 1.3em;
  color: #50a032;
  box-shadow: 0.4em 0.7em 0 -0.2em, -0.2em 0.7em 0 -0.1em, -0.6em 0.5em 0 -0.2em,
    -0.1em -0.2em 0 0.4em, -0.1em -0.2em 0 0.6em #2b4d13;
  transform: rotate(-40deg);
}

.ears::after {
  top: -1.1em;
  right: 5.8em;
  color: #5cb739;
  box-shadow: 0.3em 0.6em 0 -0.2em, -0.1em 0.6em 0 -0.1em, -0.6em 0.6em 0 -0.2em,
    -0.1em -0.2em 0 0.4em, -0.1em -0.2em 0 0.6em #2b4d13;
  transform: rotate(-6deg);
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
</style>
